<template>
    <el-table :data="list" style="width: 100%">
      <el-table-column label="选择" width="55" >
        <template #default="scope">
          <el-checkbox v-model="scope.row.state" size="large" @change="changeHandle(scope.$index)" :disabled="scope.row.state"/></template>
      </el-table-column>
      <el-table-column label="编号" width="120">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="待办事项" width="250">
        <template #default="scope">{{ scope.row.content }}</template>
      </el-table-column>
      <el-table-column label="创建时间" width="120">
        <template #default="scope">{{ scope.row.startDate }}</template>
      </el-table-column>
      <el-table-column label="完成时间" width="120">
        <template #default="scope">{{ scope.row.finishData }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="删除" min-width="60">
        <template #default="scope">
            <el-button
            link
            type="success"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
            >
            删除
            </el-button>
        </template>
    </el-table-column>
    </el-table>
  </template>

  <script>
  import { ElMessageBox } from 'element-plus'

  export default {
    props:{list:Array}, //从父组件接收数据
    data(){
      return{
        list1:this.list
      }
    },
    methods:{
      changeHandle(i){
        ElMessageBox.confirm(
            '此项任务真的完成了吗？',
            'Warning',
            {
              confirmButtonText: '确定',
              cancelButtonText: '手抖了',
              type: 'warning',
            }
          )
            .then(() => {
              //当点击确定后触发的事件写在这里
              //把当前点击的行的下标传递给父组件
              this.$emit('changeD',i)
            })
            .catch(() => {
              //当点击手抖了后触发的事件写在这里
              //把state重新改为false
              this.list1[i].state = false
            })
      },
      deleteRow(i){
        ElMessageBox.confirm(
            '确定要删除吗？',
            'Warning',
            {
              confirmButtonText: '确定',
              cancelButtonText: '手抖了',
              type: 'warning',
            }
          )
            .then(() => {
              //当点击确定后触发的事件写在这里
              //把当前点击的行的下标传递给父组件
              this.$emit('del',i)
            })
            .catch(() => {
              //当点击手抖了后触发的事件写在这里
              
             
            })
      }
    }
  }
  </script>

<style>
.el-input {
    --el-input-focus-border: var(--el-color-success);
    --el-input-focus-border-color: var(--el-color-success);
}
.el-checkbox {
    --el-checkbox-checked-text-color: var(--el-color-success);
    --el-checkbox-checked-input-border-color: var(--el-color-success);
    --el-checkbox-checked-bg-color: var(--el-color-success);
    --el-checkbox-input-border-color-hover: var(--el-color-success);
   
}
</style>